<template>
	<view style="background-color: #f5f5f5;">
		<image src="https://zhizhijiaoyu001.oss-cn-shanghai.aliyuncs.com/static/rengang2.png" style="width: 100%;" mode=""></image>
		<view class="conmeMeConme">
			<view class="menTabs">
				<view class="atbacKSuys" :class="{
					active:tbaIndex==index
				}" v-for="(item,index) in tabs" @click="tbaIndex=index">{{item}}</view>
			</view>
			
			<view class="conmeMse">
				<view class="conmetConme">
					<view class="naet-name">专业</view>
					<input type="text" v-model="major_cn" placeholder="请输入" />
				</view>
				<view class="conmetConme">
					<view class="naet-name" style="width: 400rpx;">是否搜索不限专业岗位</view>
					<switch :checked="isCategory_cn"  @click="isCategory_cn=!isCategory_cn" />
				</view>
				<view class="conmetConme">
					<view class="naet-name">学历</view>
					<view class="education-select" @click="showEducationPopup = true">
						<text class="education-text" :class="{placeholder: !education_cn}">{{education_cn || '请选择学历'}}</text>
						<text class="arrow">▼</text>
					</view>
				</view>
				<view class="conmetConme">
					<view class="naet-name">公司名称</view>
					<input type="text" v-model="company_name" placeholder="请输入" />
				</view>
				<view class="conmetConme" v-if="!isCategory_cn">
					<view class="naet-name">岗位名称</view>
					<input type="text" v-model="job_name" placeholder="请输入" />
				</view>
				<view class="conmetConme">
					<view class="naet-name">工作地点</view>
					<view class="location-container">
						<view class="location-list">
							<view v-for="(item,index) in valuname" :key="index" class="location-item">
								<text>{{item}}</text>
								<text @click.stop="removeLocation(index)" class="remove-btn">×</text>
							</view>
							<text v-if="!valuname.length" @click="maskCloseAble=true" class="placeholder">请选择地区</text>
						</view>
						<view class="location-actions">
							<text @click="maskCloseAble=true" class="add-btn">+添加</text>
							<text v-if="valuname.length > 0" @click="clearAllLocations" class="clear-btn">清空</text>
						</view>
					</view>
				</view>
				<view class="mesnge" @click="zhiengPise">
					智能匹配
				</view>
			</view>
		</view>
		
		<!-- 学历选择弹框 -->
		<view v-if="showEducationPopup" class="education-popup-overlay" @click="showEducationPopup = false">
			<view class="education-popup" @click.stop>
				<view class="popup-header">
					<text class="popup-title">选择学历</text>
					<text class="popup-close" @click="showEducationPopup = false">×</text>
				</view>
				<view class="popup-content">
					<view 
						v-for="(option, index) in educationOptions" 
						:key="index" 
						class="education-option" 
						:class="{selected: education_value === option.value}"
						@click="selectEducation(option)"
					>
						<text>{{option.label}}</text>
						<text v-if="education_value === option.value" class="check-icon">✓</text>
					</view>
				</view>
			</view>
		</view>
		
		<cityPicker :column="2" :default-value="current_residence" :districtMesLIst="districtMesLIst" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="isCurrent_residence=false" :visible="isCurrent_residence"/>
	<footerTer></footerTer>
	
	</view>
</template>

<script>
	import footerTer from "../../components/footer.vue"
	import {
		Request
	} from '@/utils/request.js'
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker1'
	export default{
		components:{
			cityPicker,
			footerTer
		},
					data(){
			return {
				tbaIndex:0,
				tabs:['推荐','校招','社招','实习','兼职'],
				area_code:'',
				major_cn:"",
				area_cn:'',
				maskCloseAble: false,
				education_cn:"",
				education_value:"", // 学历值
				company_name:"",
				isCurrent_residence:true,
				isCategory_cn:false, // 修正变量名
				job_name:"",
				current_residence:[],
				districtMesLIst:[],
				valuname:[],
				valu:[],
				// 学历相关
				showEducationPopup: false,
				educationOptions: [
					{label: '全部学历', value: ''},
					{label: '大专', value: '大专'},
					{label: '本科', value: '本科'},
					{label: '硕士', value: '硕士'},
					{label: '博士', value: '博士'}
				]
			}
		},
		onLoad() {
			this.getDistricts();
		},
		methods:{
			zhiengPise(){
				let json={
					nature_cn: this.tbaIndex,
					major_cn: this.major_cn,
					education_cn: this.education_cn,
					company_name: this.company_name,
					job_name: this.isCategory_cn ? '' : this.job_name, // 根据开关决定是否传递岗位名称
					category_cn: this.isCategory_cn ? '' : this.job_name, // 不限专业时将岗位名称作为类别搜索
					valu: this.valu,
					valuname: this.valuname,
					isCategory_cn: this.isCategory_cn // 传递开关状态
				}
				
				// 传递学历值而不是显示文本
				if(this.education_value) {
					json.education_cn = this.education_value;
				}
				
				// 处理地区参数 - 支持多选和全省查询
				if(json.valu && json.valu.length > 0) {
					json.valu = JSON.stringify(json.valu);
					json.valuname = JSON.stringify(json.valuname);
				}
				
				let url = '';
				for(let i in json){
					if(json[i] !== '' && json[i] !== null && json[i] !== undefined){
						if(i === 'job_name' && this.isCategory_cn) {
							// 当选择"搜索不限专业岗位"时，跳过job_name参数
							continue;
						}
						url += `&${i}=${encodeURIComponent(json[i])}`;
					}
				}
				
				console.log('筛选参数:', json);
				console.log('URL:', url);
				
				uni.navigateTo({
					url: `/pages/Job/positionList?${url.substring(1)}` // 去掉开头的&
				})
			},
			// 
			getDistricts(){
				Request('/getDistricts',{
					district_list:''
				}).then((res)=>{
					this.districtMesLIst=res;
					console.log(res);
				})
			},
			confirm(e){
				let name=[];
				let valu=[];
				e.map(item=>{
					// 如果是全省选项，显示省名称+"全省"
					if(item.valu.includes('_all')) {
						// 从districtMesLIst中找到对应的省份
						const provinceId = item.valu.split('_')[0];
						const province = this.districtMesLIst.find(p => p.valu === provinceId);
						if(province) {
							name.push(province.name + '全省');
						} else {
							name.push(item.name + '全省');
						}
						// 对于全省查询，存储省份代码
						valu.push(provinceId);
					} else {
						name.push(item.name);
						valu.push(item.valu);
					}
				})
				
				// 支持多选：追加到现有选择
				this.valuname = [...this.valuname, ...name];
				this.valu = [...this.valu, ...valu];
				
				// 去重处理
				this.valuname = [...new Set(this.valuname)];
				this.valu = [...new Set(this.valu)];
				
				this.maskCloseAble = false;
			},
			
			// 选择学历
			selectEducation(option) {
				this.education_cn = option.label;
				this.education_value = option.value;
				this.showEducationPopup = false;
			},
			
			// 新增：清除某个地区选择
			removeLocation(index) {
				this.valuname.splice(index, 1);
				this.valu.splice(index, 1);
			},
			
			// 新增：清除所有地区选择
			clearAllLocations() {
				this.valuname = [];
				this.valu = [];
			}
			// https://app.zizijy.com/api/getDistricts
		}
	}
</script>

<style>
	.conmeMeConme{
		font-family: PingFang SC, PingFang SC;
		width: 700rpx;
		border-radius: 10rpx;
		margin: 0 auto;
		padding: 1rpx;
		background-color: #fff;
	}
	.menTabs{
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 75rpx;
		font-weight: 500;
		font-size: 32rpx;
		background-color: #f4f4f4;
		text-align: center;
	}
	.menTabs .atbacKSuys{
			padding:  0 20rpx;
	}
	.menTabs .atbacKSuys.active{
		color: #6083e8;
		background-color: #fff;
	}
	.conmetConme{
		display: flex;
		align-items: center;
		min-height: 70rpx;
		background-color: #f4f4f4;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;
		margin-bottom: 15rpx;
		margin: 20rpx 0;
		justify-content: space-between;
	}
	.conmeMse{
		width: 650rpx;
		margin: 0 auto;
		padding:20rpx 0rpx;
	}
	.mesnge{
		text-align: center;
		line-height: 90rpx;
		background-color: #6488f0;
		height: 90rpx;
		font-size: 28rpx;
		color: #fff;
		border-radius: 10rpx;
	}
	.naet-name{
		min-width: 300rpx;
	}
	.location-container {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.location-list {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10rpx;
	}
	.location-item {
		display: flex;
		align-items: center;
		background-color: #e6f1ff;
		border: 1rpx solid #6083e8;
		border-radius: 15rpx;
		padding: 8rpx 12rpx;
		margin-right: 10rpx;
		margin-bottom: 5rpx;
		color: #6083e8;
		font-size: 24rpx;
	}
	.location-item .remove-btn {
		margin-left: 8rpx;
		color: #ff4d4f;
		font-weight: bold;
		font-size: 28rpx;
		line-height: 1;
	}
	.placeholder {
		color: #999;
		font-size: 28rpx;
	}
	.location-actions {
		display: flex;
		align-items: center;
	}
	.add-btn {
		color: #6083e8;
		font-size: 24rpx;
		margin-right: 20rpx;
		padding: 5rpx 10rpx;
		border: 1rpx solid #6083e8;
		border-radius: 10rpx;
	}
	.clear-btn {
		color: #ff4d4f;
		font-size: 24rpx;
		padding: 5rpx 10rpx;
		border: 1rpx solid #ff4d4f;
		border-radius: 10rpx;
	}
	
	/* 学历选择样式 */
	.education-select {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		border-radius: 5rpx;
		padding: 0 10rpx;
		min-height: 50rpx;
		border: 1rpx solid #e0e0e0;
	}
	
	.education-text {
		font-size: 28rpx;
		color: #333;
	}
	
	.education-text.placeholder {
		color: #999;
	}
	
	.arrow {
		color: #999;
		font-size: 24rpx;
		transform: rotate(0deg);
		transition: transform 0.2s;
	}
	
	/* 学历弹框样式 */
	.education-popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.education-popup {
		width: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		margin: 0 50rpx;
	}
	
	.popup-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background-color: #f8f9fa;
	}
	
	.popup-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}
	
	.popup-close {
		font-size: 40rpx;
		color: #999;
		line-height: 1;
	}
	
	.popup-content {
		max-height: 600rpx;
		overflow-y: auto;
	}
	
	.education-option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid #f0f0f0;
		font-size: 30rpx;
		color: #333;
		transition: background-color 0.2s;
	}
	
	.education-option:last-child {
		border-bottom: none;
	}
	
	.education-option:active {
		background-color: #f0f0f0;
	}
	
	.education-option.selected {
		background-color: #e6f1ff;
		color: #6083e8;
	}
	
	.check-icon {
		color: #6083e8;
		font-size: 32rpx;
		font-weight: bold;
	}
</style>